<%@page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
            request.getServerPort() + "/" + request.getContextPath() + "/";
%>
<html>
<head>
    <mate http-equiv="Content-Type" content="text/html;charset=UTF-8"></mate>
    <title>员工管理</title>
    <script type="text/javascript" src="<%=basePath%>/static/js/jquery.min.js"></script>

    <link href="<%=basePath%>/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="<%=basePath%>/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<%--添加员工的一个模态框--%>
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="empAddModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Closr"><span
                        aria-hidden="true"></span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <%--员工姓名--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input"
                                   placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <%--邮箱地址--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input"
                                   placeholder="email@qq.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <%--性别--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender_add_input" value="男"
                                       checked="checked">男</label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="女">女
                            </label>
                        </div>
                    </div>
                    <%--部门的下拉框--%>
                    <div class="form-group"><label class="col-sm-2 control-label">部门名称</label>
                        <div class="col-sm-4">
                            <%--提供部门的下拉选项框：给部门的id值--%>
                            <select class="form-control" name="did"></select>
                        </div>

                    </div>
                </form>
            </div>
            <%--保存和关闭按钮--%>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_sava_btn">保存</button>
            </div>
        </div>
    </div>
</div>

<%--搭建员工显示页面--%>
<div class="container"><%--页面布局：固定宽度--%>
    <%--标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>员工管理系统（CRM）</h1>
        </div>
    </div>
    <br/>
    <%--新增和删除按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
        </div>
    </div>
    <br/>
    <%--显示表格--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th><input type="checkbox" id="check_all"/></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>性别</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                </thead>
                <%--表中的数据，从数据库中--%>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <%--显示分页信息--%>
    <div>
        <%--分页文字信息--%>
        <div class="col-md-6" id="page_info_area"></div>
        <%--分页条信息--%>
        <div class="col-md-6" id="page_nav_area"></div>
    </div>
    <%--使用Ajax请求数据显示员工列表页面--%>
    <script type="text/javascript">
        <%--页面加载完成后，直接发送我们Ajax请求到分页的数据页面--%>
        var totalRecord, currentPage;
        $(function () {
            //    去首页
            to_page(1);
        });

        function to_page(pn) {
            $.ajax({
                url: "<%=basePath%>/emps",
                data: "pn=" + pn,
                type: "GET",
                success: function (result) {
                    //    解析并显示员工数据
                    build_emps_table(result);
                    //    解析并显示分页信息
                    build_page_info(result);
                    //    解析显示分页条数据
                    buil_page_nav(result);
                }
            });

        }

        //显示员工数据
        function build_emps_table(result) {
            //    清空table表格中的数据
            $("#emps_table tbody").empty();

            var emps = result.datas.pageInfo.list;

            $.each(emps, function (index, item) {
                var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td> ");
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var emailTd = $("<td></td>").append(item.email);
                var genderTd = $("<td></td>").append(item.gender);
                var deptNameTd = $("<td></td>").append(item.department, deptName);
                //编辑和删除按钮
                var editBtn = $("<button></button>").addClass("btn btn_primary btn_sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                //为编辑按钮添加一个定义的属性，来表示当前员工的id
                editBtn.attr("edit-id", item.empId);

                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                // 为删除按钮添加一个定义的属性，来表示当前的员工id
                editBtn.attr("del-id", item, empId);

                var btnTd = $("<td></td>").append(editBtn).append("").append(delBtn);
                //appen方法执行完毕后还是返回原来的元素
                $("<tr></tr>").append(checkBoxTd)
                    .append(empIdTd)
                    .append(empNameTd)
                    .append(emailTd)
                    .append(genderTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo("#emps_table tbody");


            });
        }

        //    解析分页信息
        function build_page_info(result) {
            $("#page_info_area").empty();
            $("#page_info_area").append("当前第" + result.datas.pageInfo.pageNum + "页，" +
                "总共" + result.datas.pageInfo.pages + "页，总共" + result.datas.pageInfo.total + "条记录");
            totalRecord = result.datas.pageInfo.total;
            currentPage = result.datas.pageInfo.pageNum;
        }

        //    解析显示分页条，点击分页到下一页
        function build_page_nav(result) {
            $("#page_nav_area").empty();

            var ul = $("<ul></ul>").addClass("pagination");

            //    构建元素
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

            if (result.datas.pageInfo.hasPreviousPage == false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");

            } else {
                //    给元素添加点击分页的事件
                firstPageLi.click(function () {
                    to_page(1); /*首页*/
                });

                prePageLi.click(function () {
                    to_page(result.datas.pageInfo.pageNum - 1);/*首页后面的上一页*/
                });
            }
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageli = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            if (result.datas.pageInfo.hasNextPage == false) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            } else {
//    给元素添加点击翻页的事件
                nextPageLi.click(function () {
                    to_page(result.datas.pageInfo.pageNum + 1);
                });
                lastPageli.click(function () {
                    to_page(result.datas.pageInfo.page);
                });

            }
            //添加首页和前一页的提示
            ul.append(firstPageLi).append(prePageLi);
            //1、2、3遍历给ul中添加页码显示
            $.each(result.datas.pageInfo.navigatepageName, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));

                if (result.datas.pageInfo.pageName = item) {
                    numLi.addClass("active");
                }
                numLi.click(function () {
                    to_page(item);
                });
                ul.append(numLi);
            });
            //    添加尾页和下一页的提示
            ul.append(nextPageLi).append(lastPageli);
            //    把ul加入到nav
            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo("#page_nav_area");
        }

        //    点击新增按钮弹出模态框
        $("#emp_add_modal_btn").click(function () {
            getDepts("#empAddModal select");
            //    弹出模态框
            $("#empAddModal").modal({
                backdrop: "static"
            });
        });


        //    查出所有的部门信息，并且显示在模态框的下拉列表
        function getDepts(ele) {
            $(ele).empty();
            $.ajax({
                url: "<%=basePath%>/depts",
                type: "GET",
                success: function (result) {
                    $.each(result.datas.depts, function () {
                        var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
            });
        }

        //    点击保存按钮，保存员工信息
        $("#emp_sava_btn").click(function () {
            //    发送Ajax请求
            $.ajax({
                url: "<%=basePath%>/emps",
                type: "POST",
                data: $("#empAddModal form").serialize(),
                success: function (result) {
                    //保存成功后关闭模态框
                    $("#empAddModal").modal('hide');
                    //保存成功后直接到员工列表最后一页
                    to_page(totalRecord);
                }
            });
        });
        //    实现单个删除员工
        $(Document).on("click", "delete_btn", function () {
            //    设计弹出是否删除对话框
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            var empId = $(this).attr("del-id");
            if (confirm("确定删除【" + empName + "】吗")) {
                //    确定删除
                $.ajax({
                    url: "<%=basePath%>/Employee/" + empId,
                    type: "DELETE",
                    success: function (result) {
                        alert(result.msg);
                        //    删除成功返回本页
                        to_page(currentPage);
                    }
                });
            }
        });
        //全选和全部选功能
        $("#check_all").click(function () {
            var flag = $(".check_item:checked").length == $(".check_item").length;
            $("#check_all").prop("checked", flag);
        });

        //    批量删除
        $("#emp_delete_all_btn").click(function () {

            var empNames = "";
            var del_idstr = "";
            $.each($(".check_item:checked"), function () {
                empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
                //    组装员工id字符串
                del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "";
            });
            // 去除多余的empName
            empNames = empNames.substring(0, empNames.length - 1);
            //    去除删除的多余的id
            del_idstr = del_idstr.substring(0, del_idstr.length - 1);
            //    设计弹出是否删除的对话框
            if (confirm("确认删除【" + empNames + "】吗？")) {
                //    确认
                $.ajax({
                    url: "<%=basePath%>/Employee/" + del_idstr,
                    type: "DELETE",
                    success: function (result) {
                        alert(result.msg);
                        to_page(currentPage);
                    }
                });
            }
        });


    </script>

</div>
</body>
</html>
